<template>
  <div class="product-detail-page">
    <!-- 返回导航 -->
    <div class="nav-bar">
      <div class="back-button" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <div class="nav-title">商品详情</div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-indicator">
      正在加载商品信息...
    </div>
    
    <!-- 错误提示 -->
    <div v-else-if="error" class="error-message">
      {{ error }}
    </div>
    
    <!-- 商品信息 -->
    <div v-else class="product-content">
      <!-- 商品图片 -->
      <div class="product-images">
        <img :src="product.image || `https://via.placeholder.com/400x400?text=${product.name}`" :alt="product.name" />
      </div>
      
      <!-- 商品价格信息 -->
      <div class="product-price-info">
        <div class="price">¥{{ product.price }}</div>
        <div class="title">{{ product.name }}</div>
        <div class="sales" v-if="product.sales">已售 {{ product.sales }}+</div>
      </div>
      
      <!-- 商品店铺信息 -->
      <div class="shop-section" v-if="shop">
        <div class="shop-info">
          <div class="shop-avatar">
            <img :src="shop.avatar || 'https://via.placeholder.com/40x40'" :alt="shop.name" />
          </div>
          <div class="shop-name">{{ shop.name }}</div>
        </div>
        <div class="enter-shop">进店</div>
      </div>
      
      <!-- 商品详细信息 -->
      <div class="detail-section">
        <div class="section-title">商品详情</div>
        <div class="detail-content">
          <div class="detail-text">{{ product.description || '暂无商品详细描述' }}</div>
          <div class="detail-images" v-if="product.detailImages && product.detailImages.length">
            <img v-for="(img, index) in product.detailImages" :key="index" :src="img" :alt="`${product.name} - 详情图 ${index+1}`" />
          </div>
        </div>
      </div>
      
      <!-- 商品参数 -->
      <div class="params-section" v-if="product.params && Object.keys(product.params).length">
        <div class="section-title">商品参数</div>
        <div class="params-list">
          <div class="param-item" v-for="(value, key) in product.params" :key="key">
            <span class="param-name">{{ key }}:</span>
            <span class="param-value">{{ value }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部购买栏 -->
    <div class="purchase-bar">
      <div class="action-buttons">
        <div class="action-btn shop">
          <div class="icon shop-icon"></div>
          <div class="text">店铺</div>
        </div>
        <div class="action-btn favorite">
          <div class="icon favorite-icon"></div>
          <div class="text">收藏</div>
        </div>
        <div class="action-btn cart">
          <div class="icon cart-icon"></div>
          <div class="text">购物车</div>
        </div>
      </div>
      <div class="buy-buttons">
        <div class="add-to-cart-btn" @click="addToCart">加入购物车</div>
        <div class="buy-now-btn" @click="buyNow">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const product = ref({
  name: '示例商品',
  price: '299.00',
  image: 'https://dummyimage.com/400x400/cccccc/000000&text=商品',
  description: '这是一个示例商品的详细描述。这里可以放置商品的详细介绍、材质、使用说明等信息。',
  sales: 1000,
  detailImages: [
    'https://dummyimage.com/600x300/cccccc/000000&text=详情图1',
    'https://dummyimage.com/600x300/cccccc/000000&text=详情图2'
  ],
  params: {
    '品牌': '示例品牌',
    '材质': '优质材料',
    '尺寸': '标准尺寸',
    '重量': '0.5kg'
  }
});

const shop = ref({
  name: '示例店铺',
  avatar: 'https://dummyimage.com/40x40/cccccc/000000&text=店',
});

const loading = ref(false);
const error = ref('');

const goBack = () => {
  router.back();
};

const addToCart = () => {
  alert('商品已添加到购物车!');
};

const buyNow = () => {
  router.push('/cart?checkout=true');
};
</script>

<style scoped>
.product-detail-page {
  padding-bottom: 60px; /* 为底部购买栏留出空间 */
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.back-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.loading-indicator {
  padding: 20px;
  text-align: center;
  color: #666;
}

.error-message {
  padding: 20px;
  margin: 10px;
  text-align: center;
  background-color: #ffeeee;
  color: #ff0000;
  border-radius: 4px;
}

.product-content {
  background-color: #fff;
}

.product-images {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.product-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-price-info {
  padding: 12px 15px;
  border-bottom: 10px solid #f5f5f5;
}

.price {
  font-size: 20px;
  color: #ff6b35;
  font-weight: bold;
  margin-bottom: 8px;
}

.title {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 8px;
}

.sales {
  font-size: 12px;
  color: #999;
}

.shop-section {
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 10px solid #f5f5f5;
}

.shop-info {
  display: flex;
  align-items: center;
}

.shop-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
  margin-right: 10px;
}

.shop-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-name {
  font-size: 14px;
  color: #333;
}

.enter-shop {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 12px;
  color: #666;
}

.section-title {
  padding: 12px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.detail-content {
  padding: 15px;
}

.detail-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.detail-images img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 4px;
}

.params-section {
  margin-top: 10px;
  background-color: #fff;
  border-top: 10px solid #f5f5f5;
}

.params-list {
  padding: 15px;
}

.param-item {
  display: flex;
  margin-bottom: 10px;
}

.param-name {
  width: 80px;
  color: #999;
}

.param-value {
  flex: 1;
  color: #333;
}

.purchase-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  z-index: 99;
}

.action-buttons {
  display: flex;
  padding: 0 5px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.text {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}

.buy-buttons {
  flex: 1;
  display: flex;
}

.add-to-cart-btn, .buy-now-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.add-to-cart-btn {
  background-color: #ff9800;
}

.buy-now-btn {
  background-color: #ff6b35;
}

/* 图标样式 */
.shop-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

.favorite-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E");
}

.cart-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
}
</style> 